<template>
    <div>
        <el-button style="float: left;"  type="primary"  @click="addFormVisible=true">添加</el-button>
        <h2 style="text-align: center">{{name}}</h2>
        <el-table
                :data="doctors.slice((currentPage-1)*pagesize,currentPage*pagesize)">

            <el-table-column
                    label="编号"
                    prop="id"
                    align="center"

            >
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="name"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="性别"
                    align="center">
                <template #default="scope">
                    <p v-if="scope.row.sex=='1'">男</p>
                    <p v-if="scope.row.sex=='2'">女</p>
                </template>
            </el-table-column>
            <el-table-column
                    label="身份证号"
                    prop="idCard"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="电话"
                    prop="phone"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    label="水平"
                    align="center">
                <template #default="scope">
                    <p v-if="scope.row.level=='1'">专家</p>
                    <p v-if="scope.row.level=='2'">普通</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">

                <template #default="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">排班
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <center>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="doctors.length"
            >
            </el-pagination>
        </center>


        <el-dialog   v-model="addFormVisible" width="420px" >
            <el-form ref="adddoctorform" :model="adddoctor" :rules="rules">
                <h3 style="text-align: center">添加医生</h3>
                <!--                <el-form-item label="编号" >-->
                <!--                    <el-input v-model="adddoctor.id" autocomplete="off" style="width: 300px;float: right"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="adddoctor.name" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="info">
                    <el-input v-model="adddoctor.info" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio  v-model="adddoctor.sex" style="margin-left: 50px" label="1">男</el-radio>
                    <el-radio v-model="adddoctor.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="adddoctor.idCard" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="adddoctor.phone" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="资历" prop="career">
                    <el-input v-model="adddoctor.career" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="水平" prop="level">
                    <el-radio  v-model="adddoctor.level" style="margin-left: 50px" label="1">专家</el-radio>
                    <el-radio v-model="adddoctor.level" label="2">普通</el-radio>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="adddoctor.password" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="passwords">
                    <el-input type="password" v-model="adddoctor.passwords" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="adddoctorform('adddoctorform')">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="dialogFormVisible" width="410px" >
            <el-form :model="doctor">
                <el-form-item label="编号" >
                    <el-input v-model="doctor.id" readonly="readonly"  autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="姓名" >
                    <el-input v-model="doctor.name" readonly="readonly"  autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="日期"
                            width="120">
                        <template #default="scope">{{ scope.row.date }}</template>
                    </el-table-column>

                    <el-table-column
                            label="数量"
                            >
                        <template #default="scope"><el-input v-model="scope.row.number"></el-input></template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="toggleSelection()">取消</el-button>
                    <el-button type="primary" @click="OnSubmit">确 定</el-button></center>
            </div>

        </el-dialog>
    </div>
</template>

<script>

    import axios from "axios";
    import {ElMessage} from "element-plus";

    export default {
        name: "Scheduling",
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.user.passwords!== '') {
                    //     this.$refs.user.validateField('passwords');
                    // }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.adddoctor.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                departmentId:'',
                doctors: {
                    id: '',
                    name: '',
                    info:'',
                    career:'',
                    level:'',
                    sex:'',
                    idCard:'',
                    phone:'',
                    departmentId: '',
                    second_id:''
                },
                doctors:[],
                currentPage:1, //初始页
                pagesize:5,    //    每页的数据
                dialogFormVisible: false,
                name:'',
                time:'',
                type:'',
                doctor: {
                    id: '',
                    name: '',
                    info:'',
                    career:'',
                    level:'',
                    sex:'',
                    idCard:'',
                    phone:'',
                    departmentId: '',
                    second_id:''
                },
                schedulings:{
                    date: '',
                    number: 0,
                    did:'',
                    id:''
                },
                schedulings:[],
                tableData: [{
                    date: '',
                    number: 0,
                    did:'',
                    id:''
                }, {
                    date: '',
                    number: 0,
                    did:'',
                    id:''
                }, {
                    date: '',
                    number: 0,
                    did:'',
                    id:''
                }, {
                    date: '',
                    number:0,
                    did:'',
                    id:''
                }, {
                    date: '',
                    number: 0,
                    did:'',
                    id:''
                }],
                addFormVisible: false,
                adddoctor: {
                    id: '',
                    name: '',
                    info:'',
                    career:'',
                    level:"",
                    sex:'',
                    password:'',
                    passwords:'',
                    idCard:'',
                    phone:'',
                    departmentId: '',
                    second_id:''
                },
                multipleSelection: [],
                rules:{
                    name:[
                        {required:true,message:"姓名不可为空",trigger:'blur'}
                    ],
                    career:[
                        {required:true,message:"资历不可为空",trigger:'blur'}
                    ],
                    level:[
                        {required:true,message:"水平不可为空",trigger:'blur'}
                    ],
                    info:[
                        {required:true,message:"简介不可为空",trigger:'blur'}
                    ],
                    sex:[
                        {required:true,message:"性别不可为空",trigger:'blur'}
                    ],
                    age:[
                        {required:true,message:"年龄不可为空",trigger:'blur'}
                    ],
                    idCard: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                        { min: 18, max: 18, message: '请正确输入身份证号', trigger: 'blur' },
                    ],
                    phone:[
                        {required:true,message:"电话不可为空",trigger:'blur'},
                        { min: 11, max: 11, message: '请正确输入电话号码', trigger: 'blur' },
                    ],
                    login_name:[
                        {required:true,message:"登录昵称不可为空",trigger:'blur'}
                    ],
                    address:[
                        {required:true,message:"地址不可为空",trigger:'blur'}
                    ],
                    password: [
                        {required:true,message:"密码不可为空",trigger:'blur'},
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwords: [
                        {required:true,message:"第二次密码不可为空",trigger:'blur'},
                        { validator: validatePass2, trigger: 'blur' }
                    ],

                },
            }
        },

        activated(){
            this.departmentId=localStorage.getItem('departmentId');
            this.adddoctor.departmentId=this.departmentId;
            this.name=localStorage.getItem('departmentname');
            this.create();
            this.currentTime();
        },
        methods: {
            create(){
                axios.get("http://119.29.60.153:8001/doctorservice/doctor/getDoctorsByDepartmentId/"+this.departmentId).then(resp=> {
                    this.doctors=resp.data.data.list;
                })
            },
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },

            OnSubmit(){
                axios.post("http://119.29.60.153:8001/doctorservice/schedule/setSchedule",this.multipleSelection).then(resp=> {
                    if(resp.data.success==true){
                        ElMessage.success("排班成功!");
                        this.dialogFormVisible=false;
                        this.toggleSelection();
                        for(var i=0;i<this.tableData.length;i++){
                            this.tableData[i].number=0;
                        }
                    }
                    else {
                        ElMessage.success("排班失败,请重试");
                        this.addFormVisible=false;

                    }

                })
            },

            adddoctorform( formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/doctor/addDoctor",this.adddoctor).then(resp=> {

                            if(resp.data.success==true){
                                ElMessage.success('成功添加医生');
                                this.create();
                                this.addFormVisible=false;
                                this.adddoctor={};
                                this.adddoctor.departmentId=this.departmentId;
                            }
                            else {
                                ElMessage.error("添加失败!");
                                this.addFormVisible=false;

                            }
                        })
                    }else {
                        return false;
                    }
                })

            },

            handleEdit(index,row){
                this.doctor= row;
                this.dialogFormVisible = true;
                axios.post("http://119.29.60.153:8001/doctorservice/schedule/getScheduleById?id="+this.doctor.id).then(resp=> {
                    this.schedulings=resp.data.data.list;
                    for(var i=0;i<this.tableData.length;i++){
                        for(var j=0;j<this.schedulings.length;j++){
                            if(this.tableData[i].date==this.schedulings[j].date){
                                this.tableData[i].number=this.schedulings[j].number;
                                this.tableData[i].id=this.schedulings[j].id;
                                this.toggleSelection([this.tableData[i]]);
                            }
                        }
                    }
                })
                for(var i=0;i<this.tableData.length;i++){
                    this.tableData[i].did=this.doctor.id;
                }

            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                    for(var i=0;i<this.tableData.length;i++){
                        this.tableData[i].number=0;
                    }
                    this.dialogFormVisible = false;
                }

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            currentTime() {
                setInterval(this.formatDate, 500);
            },
            formatDate() {
                let date = new Date();
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                let day = date.getDate(); // 日
                for(var i=0;i<5;i++){
                    if(day+i>30){
                        month++;
                        day=1;
                        this.tableData[i].date = `${year}-${month}-${day}`;
                        for(var j=i+1,v=1;j<5;j++,v++){
                            this.tableData[j].date = `${year}-${month}-${day+v}`;
                        }
                        break;
                    }
                    else {this.tableData[i].date = `${year}-${month}-${day+i}`;}
                }
            }

        },
    }
</script>

<style scoped>
    .red{
        color: red;
    }
</style>